<style scoped>
.whitebg {
  background-color:#fff
}
.tit {
  font-size:16px;
}
</style>


<template>
  <div class="mb30">
    <h2 class="form-tit-row lineb whitebg tit">{{title}} <!--<span v-if="max > 0">最多可上传{{max}}张</span>--></h2>
    <div class="form-wrap">
      <div class="form-wrap-row" v-if="max === 0 && imgList.length === 0">
        暂无图片
      </div>
      <div class="form-wrap-row" v-else>
        <ul class="pic-list cf">
          <li v-for="(item,index) in imgList">
            <img :src="item" @click="showPrevimg(index)" v-if="item.indexOf('base64') > -1">
            <img :src="item | simpleImgUrl" @click="showPrevimg(index)" v-else>
            <i class="iconfont icon-del-black" @click="delImage(index)" v-if="max > 0"></i>
          </li>
          <div class="upload-btn" @click="getFlag()" v-if="max > 0">
            <i class="iconfont icon-add"></i>
          </div>
        </ul>
      </div>
    </div>
    <previewer ref="previewer" :list="previewerList" :options="options"></previewer>
    <!-- <viewer :show-prev='showPrev' :prev-item='prevItem' v-on:close="closeViewer()"></viewer> -->
  </div>
</template>

<script>
import { Previewer } from 'vux';
import viewer from "@/components/share/ImageUploader/viewer.vue";
export default {
  components: {
    Previewer
  },
  props: {
    title: {
      type: String,
      required: true,
      default: '拍照或选择图片'
    },
    imgList: {
      type: Array,
      required: true,
      default: [],
    },
    max:{
      type: Number,
      required: true,
      default: 9,
    }
  },
  data(){
    return {
      showPrev: false,
      prevItem: {},
      filter: this.$options.filters,
      previewerList: [],
      options: {
        isClickableElement: function (el) {
          return /previewer-delete-icon/.test(el.className)
        }
      }
    }
  },
  created(){
    this.sortPrevimg();
  },
  watch: {
    imgList: {
      handler(newName, oldName) {
        this.sortPrevimg();
      },
      deep: true,
    }
  },
  methods: {
    sortPrevimg(){
      let args = [];
      if(this.imgList.length > 0) {
        this.imgList.forEach(x => {
          let item = {};
          if(x.indexOf('base64') > -1) {
            item = {
              src: x
            }
          } else {
            item = {
              src: this.filter['simpleImgUrl'](x)
            }
          }
          args.push(item);
        });
        this.previewerList = args;
      }
    },
    showPrevimg (index) {
      this.$refs.previewer.show(index);
    },

    PrevPic(item){
      if(item.indexOf('base64') > -1){
        this.prevItem = { Base64: item };
      } else {
        this.prevItem = { Url: item };
      }
      this.showPrev = !this.showPrev;
    },
    
    delImage(i) {
      var self = this;
      self.imgList.splice(i, 1);
    },

    testgetFlag(){
      this.imgList.push("")
    },

    getFlag() {
      var self = this;
      let currentSize = this.imgList.length;

      if(currentSize >= this.max){
        self.Toast({
          message: `最多只能上传${this.max}张图片！`,
        });
        return false;
      }

      this.jWeixin.chooseImage({
        count: self.max - currentSize, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          var localIds = res.localIds;
          if (self.imgList.length + localIds.length > self.max) {
            self.Toast({
              message: `最多只能上传${self.max}张图片！`,
            });
            return false;
          } else {
            localIds.forEach((x) => {
              self.imgList.push(x);
            });
            self.getLocalImgData(currentSize);
          }
        }
      });
    },
    getLocalImgData: function(i) {
      var self = this;
      this.jWeixin.getLocalImgData({
        localId: self.imgList[i], // 图片的localID
        success: function(res) {
          let localData = res.localData;
          //安卓兼容
          if (localData.indexOf('data:image') != 0) {
            localData = 'data:image/jpeg;base64,' +  localData
          }
          //IOS兼容
          localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg');
          self.imgList.splice(i, 1, localData);
          self.getLocalImgData(i + 1);
        }
      });
    },
    closeViewer(){
      this.showPrev = false;
      this.prevItem = {};
    },
  }
}
</script>